<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<title>The Gimme Javascript Library :: Test Page</title>

		<script type = "text/javascript" src = "../build/debug/gimme.js"></script>
		<script type = "text/javascript">
			
			g(window).addEvent('load', function(e)
			{
				var currentAction = 'slide';
				g('input[type=radio]').addEvent('click', function(e)
				{
					e.stopPropagation();
					currentAction = this.value;
				});
				g('label').addEvent('click', function(e) { e.stopPropagation(); });
				
				g(document.body).addEvent('click', function(e)
				{
					switch (currentAction)
					{
						case 'slide':
							slide(e);
							break;
						
						case 'bounce':
							bounce(e);
							break;
					}
				});
				
				// Add a .bounce(..) function to Gimme
				Gimme.ext.bounce = function(_dist, _duration, _guid, _callback)
				{
					var p = new Gimme.Animation.BezierCurve(
					[{x:0,y:0},{x:0,y:1},{x:0,y:2},{x:0,y:100}],
					[{x:0,y:100},{x:0,y:18},{x:0,y:19},{x:0,y:20}],
					[{x:0,y:20},{x:0,y:21},{x:0,y:22},{x:0,y:100}],
					[{x:0,y:100},{x:0,y:38},{x:0,y:39},{x:0,y:40}],
					[{x:0,y:40},{x:0,y:41},{x:0,y:42},{x:0,y:100}],
					[{x:0,y:100},{x:0,y:58},{x:0,y:59},{x:0,y:60}],
					[{x:0,y:60},{x:0,y:61},{x:0,y:62},{x:0,y:100}],
					100);
					
					var factor = _dist / 100;
					
					g(this.entities).followPath(p, factor, _duration, _guid, _callback);
				};
			});
			
			function slide(e)
			{
				g('*[id^=obj]').slideToPoint(Gimme.Screen.getMousePosition(e), 'rabbit', 'SLIDE');
			}
			
			function bounce(e)
			{
				g('*[id^=obj').bounce(100, 'rabbit');
			}
		</script>
	
		<style type = "text/css">
			html, body
			{
				height: 100%;
			}
			
			#obj1, #obj2, #obj3
			{
				position: absolute;
				height: 50px;
				width: 50px;
			}
			#obj1
			{
				top: 150px;
				left: 0;
				background: red;
			}			
			#obj2
			{
				top: 150px;
				left: 300px;
				background: blue;
			}
			#obj3
			{
				top: 150px;
				left: 500px;
				background: orange;
			}
		</style>
	</head>

	<body>
		<input id = "rdoSlide" type = "radio" name = "switch" value = "slide" checked = "checked"><label for = "rdoSlide">Slide</label>
		<input id = "rdoBounce" type = "radio" name = "switch" value = "bounce"><label for = "rdoBounce">Bounce</label>
		<div id = "obj1"></div>
		<div id = "obj2"></div>
		<div id = "obj3"></div>
	</body>

</html>